<template>
    <div id="Order" >

      <van-row>
        <van-col span="24">
          <van-cell  :border="false">
            <template #title>
                <span style="font-weight: bold; font-size: 1.3em;">订单</span>
            </template>
            <!-- 使用extra 插槽来自定义右侧图标 -->
            <template #extra>
              <van-icon
                  style="font-size: 1.6em;font-weight: bold; display: flex; align-items: center;" name="search"
                  class="search-icon" />
            </template>


          </van-cell>
          <van-tabs v-model="active" :animated="true"   :sticky="true"  color="#f52443" :swipeable="true" title-active-color="#f52443">
            <van-tab>
              <template #title><span>全部</span></template>
              <van-empty v-show="true" :image="require('../../assets/img/null.svg')" description="没有任何订单" />
              <van-list
                  v-show="false"
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad"
              >
                <van-cell v-for="(i,index) in 10" :key="index">
                  <van-card
                      tag="待评价"
                      style="background-color: white;"
                      :centered="true"
                      thumb="https://gitee.com/herther/img/raw/master/img/20210912142640.png"
                  >
                    <template #title>
                      <p  class="cateTitle">益禾堂</p>
                    </template>
                    <template #price>
                      <p class="catePrice" >
                              ￥8.5
                      </p>
                    </template>
                    <template #tags>
                      <van-tag plain type="danger">益禾烤奶</van-tag>
                    </template>
                    <template #num>
                      <p class="cateNum" >
                          共 1 件
                      </p>
                    </template>
                    <template #footer>
                      <van-button style="border-radius: 3px; float: right;" color="#ff441a" size="small">再来一单</van-button>
                      <van-button style="border-radius: 3px; float: right;" color="#337d56" size="small">去评价</van-button>
                    </template>
                  </van-card>
                </van-cell>



              </van-list>

            </van-tab>
            <van-tab title="待付款"> <van-empty v-show="true" :image="require('../../assets/img/null.svg')" description="没有任何订单" /></van-tab>
            <van-tab title="待评价"> <van-empty v-show="true" :image="require('../../assets/img/null.svg')" description="没有任何订单" /></van-tab>
            <van-tab title="待退款"> <van-empty v-show="true" :image="require('../../assets/img/null.svg')" description="没有任何订单" /></van-tab>

          </van-tabs>
        </van-col>
      </van-row>

    </div>
</template>

<script>
export default {
  name: "Order",
  data(){
    return{
      active:0,
      loading: true,
      finished: true,
    }
  },
  methods:{
    onLoad() {

    }
  }
}
</script>

<style scoped>
.cateTitle{
  font-size: 1.5em; font-weight: bold; padding-bottom: 10px;
}
.catePrice{
  font-size: 1em; color: #e74c3c; display: block;white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; width: 10rem; font-weight: bold; padding-bottom: 10px;
}
.cateNum{
  font-size: 1em; color: #e74c3c; font-weight: bold; padding-bottom: 10px;
}
</style>
